<template>
  <div class="center-container">
    <img class="bg-img lbx-img" src="../../assets/images/lbx.png" alt="lbx" />
    <img class="bg-img jt-img" src="../../assets/images/jt.png" alt="jt" />
    <img class="bg-img map-img" src="../../assets/images/map.png" alt="map" />

    <Chart :option="option" />
  </div>
</template>

<script lang="ts" setup>
import echarts from "../../utils/echarts";
import { ECOption } from "../../utils/echarts";
import china from "./china.json";

defineOptions({
  name: "Center",
});

echarts.registerMap("china", china as any);

const option: ECOption = {
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  legend: {
    show: false,
  },
  tooltip: {
    show: false,
  },
  // 即会渲染地图，同时充当地理坐标系
  geo: {
    type: "map",
    map: "china",
    itemStyle: {
      areaColor: "rgba(104, 216, 254, 0.5)",
      borderColor: "rgba(104, 216, 254, 0.7)",
    },
    // 高亮情况下
    emphasis: {
      itemStyle: {
        areaColor: "rgba(104, 216, 254, 1)",
      },
      label: {
        color: "#fff",
      },
    },
    label: {
      color: "#fff",
    },
    zoom: 1.3,
    top: 150,
  },
  series: [
    {
      // 散点图
      type: "effectScatter",
      // 数据
      data: [
        {
          value: [116.405285, 39.904989, "北京"],
        },
        [114, 22.4, "深圳"], // 数据有对象和数组写法，都行。这里演示了两种写法（数组形式更简单）
      ],
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: `{@[2]}`, // 代表使用数据数组中下标2的数据
      },
      // 使用地理坐标系
      coordinateSystem: "geo",
      itemStyle: {
        color: "#fff",
      },
    },
    {
      type: "lines",
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [114, 22.4], // 终点
          ],
        },
      ],
      // 图形效果
      effect: {
        show: true,
        symbol:
          "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
        symbolSize: 16,
        color: "#fff",
      },
      lineStyle: {
        color: "#fff",
        curveness: 0.2,
      },
      // 使用地理坐标系
      coordinateSystem: "geo",
    },
  ],
};
</script>

<style scoped lang="scss">
.center-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.bg-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.3;
}
.lbx-img {
  width: 500px;
  height: 500px;
  animation: move 30s linear infinite;
}
.jt-img {
  width: 380px;
  height: 380px;
  animation: move 30s linear infinite reverse;
}
.map-img {
  width: 350px;
  height: 350px;
  animation: move 30s linear infinite;
}

@keyframes move {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
